<template>
    <view class="memberStyle">
        <view class="topWrap">
            <view class="topContent">
                <view class="v-center">
                    <image :src="loginData.avatar ? loginData.avatar : '../static/images/headPortrait.png'"
                        style="width: 120rpx; height: 120rpx;margin-right: 32rpx;border-radius: 50%;" />
                    <!--未开通  -->
                    <view class="flex flex-column" v-if="loginData.vipStatus == vipStatusDict.notOpen">
                        <view class="flex v-center">
                            <view style="font-size: 32rpx;">{{ loginData.nickName || "--" }}</view>
                            <view style="margin-left: 28rpx;font-size: 24rpx;color: #666;">
                                VIP 未开通
                            </view>
                         </view>
                        <view style="color: #A86C12;margin-top: 14rpx;">
                            <text style="font-weight: 600; font-size: 36rpx;color: #37B874;margin-right: 14rpx;">开通会员 </text>
                            <text style="font-size: 24rpx;color: #666;">解锁学习新方式</text>
                        </view>
                    </view>
                    <!-- 已经开通 -->
                    <view class="flex flex-column" v-else-if="loginData.vipStatus == vipStatusDict.opening">
                        <view class="flex v-center">
                            <view style="font-size: 32rpx;">{{ loginData.nickName || "--" }}</view>
                            <view style="margin-left: 16rpx;"class="labelStyle">
                                VIP 
                            </view>
                         </view>
                        <view style="color: #A86C12;margin-top: 14rpx;">
                            <text style="font-weight: bold;margin-right: 8rpx;">VIP </text>
                            <text>{{ loginData.vipEndTime.split(" ")[0] }}</text>
                        </view>
                    </view>
                    <!-- 已过期 -->
                    <view class="flex flex-column" v-else-if="loginData.vipStatus == vipStatusDict.expired">
                        <view class="flex v-center">
                            <view style="font-size: 32rpx;">{{ loginData.nickName || "--" }}</view>
                            <view style="margin-left: 16rpx;color:#666666 ;background-color: #D0D0D0;"class="labelStyle">
                                VIP 
                            </view>
                         </view>
                        <view style="color: #666;margin-top: 14rpx;">
                            <text style="font-weight: bold;margin-right: 8rpx;">VIP </text>
                            <text>已过期</text>
                        </view>
                    </view>
                </view>
                <view class="flex flex-column between" style="height: 70%;align-items: flex-end;">
                    <text style="font-size: 100rpx;font-weight: bold;color: #37B874;" v-if="loginData.vipStatus != vipStatusDict.notOpen">V1</text>
                    <image src="./static/member/vipBigIcon.svg" style="width: 78rpx;height: 72rpx;" v-else/>
                    <view style="position: absolute;bottom: 30rpx;">
                        <image src="../myQuestionBank/static/smallIcon/yellowMoneyIcon.svg"
                            style="width: 30rpx;height: 30rpx;margin-right: 15rpx;"  />
                        <text style="color: #A86C12;margin-right: 30rpx;">余额 {{ loginData.userBalance||0 }}</text>
                        <image src="./static/signin/pointsIcon.svg"
                            style="width: 28rpx;height: 30rpx;margin-right: 15rpx;"  />
                        <text style="color: #A86C12;">积分 {{ loginData.myScore||0}}</text>
                    </view>
                </view>
            </view>
            <image :src="`../static/images/user/${loginData.vipStatus!=vipStatusDict.expired?'userBg':'greyUserBg'}.png`" class="bgStyle" />
        </view>
        <view class="bottomWrap">
            <view class="flex" style="margin: 34rpx 30rpx;">
                <image src="./static/recyclingBin/diamondIcon.svg" style="width: 48rpx;height: 44rpx;" />
                <text style="font-size: 32rpx;font-weight: 600;color: #000;margin-left: 24rpx;">会员充值</text>
            </view>
            <view style="margin-top: 62rpx;margin-left: 40rpx;justify-content: space-between;" class="flex" v-if="isOpenPoints">
                <view class="v-center">
                    <image src="./static/wallet/dhIcon.svg" style="width: 38rpx;height: 38rpx;"/>
                    <text style="color: #333;font-size: 32rpx;margin-left: 24rpx;">兑换方式</text>
                </view>
                <view class="flex">
                    <view class="center" v-for="item in rechargeTypeDict" @click="selectRechargeType = item.value"
                    style="margin-right: 52rpx;">
                        <image :src="`./static/member/${selectRechargeType == item.value ? 'selectRadio' : 'noSelctRadio'}.svg`"
                            style="width: 32rpx;height: 32rpx;" />
                        <view style="margin-left: 10rpx;">{{ item.text }}</view>
                    </view>
                </view>
            </view>
            <!-- 开启阶梯 -->
            <scroll-view :scroll-x="true" class="rechargeWrap" v-if="isStairs">
                <view v-for="(item,index) in rechargeData" class="rechargeItem"
                    :style="{ borderColor: selectModelIndex==index ? '#37B874' : '#fff' }"
                    @click="onRecharge(item,index)">
                    <view class="center">{{ item.vipName ||"--"}}</view>
                    <view class="center" style="color: #37B874;">
                        <text>￥</text>
                        <text style="font-size: 80rpx;font-weight: bold;">{{ item.costAmountStep ||"--"}}</text>
                    </view>
                    <view :class="selectModelIndex==index ? 'center activeBotStyle textHide' : 'center botStyle textHide'"
                        style="font-size: 24rpx; flex: 1;">
                        <text v-if="isOpenPoints">积分{{ item.integralExchangeNumStep||"--" }}可兑换</text>
                    </view>
                </view>
            </scroll-view>
            <!-- 关闭阶梯 -->
            <view v-else>
                <view class="inputStyle">
                    <input 
                        placeholder="请输入兑换月份" 
                        border="none" 
                        :customStyle="{width:'80%'}" 
                        placeholder-style="color: #999"
                        :value="numValue"
                        type="digit"
                        @input="(e)=>onInputNum(e)"
                    />
                    <text style="color: #999;font-size: 32rpx;">{{selectRechargeType==1?'金额':'积分'}}：{{ showNeedmoney||0 }}</text>
                </view>
            </view>
            <view class="bottomInfoWrap">
                <!-- <view class="v-center" @click="isRead = !isRead">
                    <image :src="`./static/member/${isRead ? 'selectIcon' : 'noSelectIcon'}.svg`"
                        style="width: 32rpx;height: 32rpx;margin-right: 10rpx;" />
                    <text style="font-size: 24rpx;">我已阅读并同意
                        <text style="color: #37B874;">《付费购买服务协议》</text>
                    </text>
                </view> -->
                <view class="bottomBtn" @click="onSumbit">
                    确认并支付
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import { notificationFun } from '../utils/PrjUtils';
import { vipHome, getUserVipInfo, exchangeVip } from './services/signInService';
export default {
    name: 'memberPage',
    data() {
        return {
            // 安全区域
            safeAreaInsets: { bottom: 0 },
            // 登录信息
            loginData: {},
            // 充值信息源
            rechargeData: [],
            // 选择的充值信息
            // selectRechargeData: {},
            // 选择的索引
            selectModelIndex:null,
            // 选择的充值类型
            selectRechargeType: 1,
            // 选择充值类型的dict
            rechargeTypeDict: [
                {
                    text: "余额",
                    value: 1,
                },
                {
                    text: "积分",
                    value: 2,
                }
            ],
            //  是否阅读
            isRead: false,
            vipStatusDict: {
                // 未开通
                notOpen: -1,
                // 开通中
                opening: 1,
                // 已经过期
                expired: 0,

            },
            // 判断阶梯数据源
            vipConfig:{},
            // 模式
            // isStairs:false,
            // 输入的月份
            numValue:"",
            // 机构ID
            organId:null,
            // 固定模式需要多少钱
            showNeedmoney:0

        };
    },
    methods: {
        onRecharge(record,index) {
            // this.selectRechargeData = record
            this.selectModelIndex=index
        },
        onInitData() {
            vipHome({organId:this.organId}).then(res => {
                this.loginData = { ...uni.getStorageSync('loginData'), ...res.vipInfo }
                // 所有的配置信息
                this.vipConfig = res.vipConfig||{}
                // 当前选择的阶梯模式
                // this.selectRechargeData = res?.vipConfig?.stepConfigs[0]||{}
                // 默认索引0
                this.selectModelIndex=0;
                // 截图的配置
                this.rechargeData=res?.vipConfig.stepConfigs||[]
            })
        },
        // 充值
        onSumbit() {
            // if(!this.isRead){
            //     return notificationFun("请阅读并同意《付费购买服务协议》")
            // }
            let param={
                    originId:this.organId??"",
                    modelType:this.vipConfig?.currentModelType,
                    payType:this.selectRechargeType,
                    index:this.vipConfig?.currentModelType==1?this.numValue:this.selectModelIndex
                }
            exchangeVip(param).then(res => {
                getUserVipInfo().then(data => {
                    let newData = { ...uni.getStorageSync('loginData'), ...data } || {}
                    uni.setStorageSync('loginData', newData);
                    this.loginData = newData
                    notificationFun("支付成功！")
                })
            })
        
        },
        // 更改分值
        onInputNum(e) {
            // 最多不能超过10位
            if(e.target.value.length>10){
                return
            }
            // 部分情况 , 事件参数e会有一定区别, 这里只需要 e.detail.value 是输入的那个字符串即可
            let num = e?.target?.value?.match(/^\d*(\.?\d{0,1})/g)[0] || null;
            this.numValue=num
            if(this.selectRechargeType==1){
                 this.showNeedmoney=Number(this.vipConfig?.costAmountFixed)*Number(num)
            }
            else{
                this.showNeedmoney=Number(this.vipConfig?.integralExchangeNumFixed)*Number(num)
            }
        },
    },
    onLoad(option ){
        // console.log(JSON.parse(decodeURIComponent(option.info)),"---247")
        let info = JSON.parse(decodeURIComponent(option.info)) || {}
        this.organId = info?.organId||""

    },
    onShow() {
        if(this.organId|| this.organId===""){
            this.onInitData()
        }
       
    },
    mounted() {
        // Add your mounted logic here
    },
    beforeMount() {
        uni.getSystemInfo({
            success: (res) => {
                console.log(res.safeAreaInsets)
                this.safeAreaInsets = res.safeAreaInsets
            }
        })
        uni.setNavigationBarTitle({
            title: uni.getStorageSync('loginData').vipStatus=-1?"开通会员":"会员续费}"
        })
    },
    computed: {
        // 1是固定 2是阶梯 判断当前模式
        isStairs(){
           return this.vipConfig?.currentModelType==2
        },
        // 判断是否开放积分模式
        isOpenPoints(){
            let {currentModelType,integralExchangeFixed,integralExchangeStep}=this.vipConfig
            if(currentModelType==1&&integralExchangeFixed){
                return true;
            }
            else if(currentModelType==2&&integralExchangeStep){
                return true
            }
            return false
        },
    }
};
</script>

<style scoped lang="scss">
.memberStyle {
    height: 100vh;
    box-sizing: border-box;
    background-color: #f3f3f3;
    display: flex;
    flex-direction: column;
}

.topWrap {
    padding: 30rpx;
    border-radius: 0 0 24rpx 24rpx;
    background-color: #fff;
    width: 100%;
    height: 342rpx;
    box-sizing: border-box;

    .topContent {
        display: flex;
        align-items: center;
        position: relative;
        z-index: 3;
        justify-content: space-between;
        padding: 20rpx 20rpx 40rpx 20rpx;
        height: 282rpx;
        box-sizing: border-box;
    }

    .bgStyle {
        position: absolute;
        top: 30rpx;
        left: 30rpx;
        width: calc(100% - 60rpx);
        height: 282rpx;
        z-index: 1;
    }

    .labelStyle {
        /* width: 60rpx; */
        padding: 2rpx 10rpx 0 10rpx;
        height: 32rpx;
        border-radius: 10rpx;
        color: #A86C12;
        background-color: #EED682;
        text-align: center;
        font-size: 24rpx;
    }
}

.bottomWrap {
    border-radius: 24rpx 24rpx 0 0;
    margin-top: 20rpx;
    background-color: #fff;
    flex: 1;
    .inputStyle{
        height: 120rpx;
        width: 100%;
        padding: 40rpx 60rpx;
        background-color: #f9f9f9;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 50rpx;

       
    }
    .rechargeWrap {
        width: calc(100vw);
        height: 286rpx;
        margin-top: 56rpx;
        /* margin-left: 30rpx; */
        /* display: flex; */
        box-sizing: border-box;
        padding: 0 20rpx;
        white-space: nowrap;

        .rechargeItem {
            box-shadow: 0px 0px 5px 0px #00000014;
            min-height: 242rpx;
            width: 214rpx;
            border: 1px solid #37B874;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32rpx;
            flex-direction: column;
            display: inline-block;
            border-radius: 8rpx;
            box-sizing: border-box;
            padding-top: 26rpx;
            margin: 20rpx;

            .botStyle {
                height: 68rpx;
                color: #999999;
            }

            .activeBotStyle {
                height: 68rpx;
                background-color: #37B874;
                color: #fff;
            }
        }

    }

    .bottomInfoWrap {
        position: absolute;
        left: 30rpx;
        bottom: 10%;

        .bottomBtn {
            width: calc(100vw - 60rpx);
            display: flex;
            align-items: center;
            justify-content: center;
            height: 90rpx;
            box-shadow: 0px 1px 8px 0px #00000014;
            border-radius: 24rpx;
            bottom: 160rpx;
            background-color: #37B874;
            color: #fff;
            margin-top: 40rpx;
        }
    }

}
</style>